<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Tags</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("base-widget-desktop");</script>
		<script type="text/javascript">
			dorado.onInit(function() {
				new dorado.widget.ToolBar({
					renderTo: document.body,
					style: "margin-bottom:12px",
					items: [
						{ caption: "奇数按钮",
							onClick: function() {
								$tag("button").set("toggled", false);
								$tag("odd").set("toggled", true);
							}
						},
						{ caption: "偶数按钮",
							onClick: function() {
								$tag("button").set("toggled", false);
								$tag("even").set("toggled", true);
							}
						},
						"|",
						{ caption: "红色按钮",
							onClick: function() {
								$tag("button").set("toggled", false);
								$tag("red").set("toggled", true);
							}
						},
						{ caption: "绿色按钮",
							onClick: function() {
								$tag("button").set("toggled", false);
								$tag("green").set("toggled", true);
							}
						},
						"|",
						{ caption: "按下所有按钮",
							onClick: function() {
								$tag("button").set("toggled", true);
							}
						},
						{ caption: "还原所有按钮",
							onClick: function() {
								$tag("button").set("toggled", false);
							}
						}
					]
				});
				
				var buttons = [];
				for (var i = 1; i <= 40; i++) {
					var color = (Math.random() < 0.5) ? "red" : "green";
					var tags = ["button", (i % 2 == 0) ? "even" : "odd", color];
					
					var button = {
						$type: "Button",
						caption: dorado.util.Common.formatFloat(i, "00"), icon: "images/" + color + ".gif",
						width: 60, toggleable: true,
						layoutConstraint: { align: "center" },
						tags: tags,
						tip: "标签: " + tags.toString()
					};
					buttons.push(button);
				}
				
				new dorado.widget.Panel({
					renderTo: document.body,
					width: 400,
					layout: { $type: "Form", cols: "*,*,*,*,*", margin: 12 },
					children: buttons
				});
			});
		</script>
	</head>
	<body style="height: 100%"></body>
</html>
